
html,
body {
  width : 100%;
  height: 100%;

  // color: @color-text-paragraph;
  #root {
    height                    : 100%;
    -webkit-overflow-scrolling: touch;
    .wm-route-layout{
      z-index: 998;
    }
  }
}

.crm-nav-bar-icon {
  width      : 22*@hd;
  height     : 22*@hd;
  font-size  : 22*@hd;
  margin-left: -4*@hd;
  margin-top : -4*@hd;
}

.crm-nav-header-icon {
  font-size: 26*@hd;
}

.crm-list-header-icon {
  font-size: 26*@hd;
  color    : @brand-primary;
}

.crm-card-bar-icon {
  font-size   : 22*@hd;
  color       : @brand-primary;
  margin-right: 2*@hd;
}

.crm-card-bar-title {
  color: @brand-primary;
}

.crm-card-phone-icon {
  font-size: 22*@hd;
}

.crm-card-operate-icon {
  font-size: 22*@hd;
}

.my-drawer {
  .am-drawer-sidebar {
    background: #fff;
    z-index   : 99999;
  }

  .am-drawer-draghandle {
    display: none;
  }
}

.crm-home {
  position: fixed;
  height  : 100%;
  width   : 100%;
  top     : 0;
}

.crm-hide-area {
  display: none;
}

.crm-list-content {
  width : 100%;
  height: 100%;

  .wm-list-page-item-row-span {
    width  : 100%;
    display: block;
  }
}

.crm_list-contacter_head {
  float           : left;
  width           : 40px;
  height          : 40px;
  line-height     : 40px;
  background-color: @brand-primary;
  border-radius   : 25px;
  display         : block;
  text-align      : center;
  font-size       : 14px;
  font-weight     : normal;
  color           : #FFF;
  margin-left     : 2px;
}

.crm-list-status {
  font-size       : @font-size-base;
  font-weight     : normal;
  color           : #fff;
  background-color: #eb6100;
  border-radius   : 10*@hd;
  padding-left    : 10*@hd;
  padding-right   : 10*@hd;
  white-space     : nowrap;
}

.crm-list-status2 {
  background-color: #333 !important;
}

.crm-list-status3 {
  background-color: #0161c9 !important;
}

.crm-list-status4 {
  background-color: green !important;
}

.crm-list-status5 {
  background-color: #4572a7 !important;
}

.crm-list-status6 {
  background-color: #aa4643 !important;
}

.crm-list-status7 {
  background-color: #89a54e !important;
}

.crm-list-status8 {
  background-color: #80699b !important;
}

.crm-list-status9 {
  background-color: #92a8cd !important;
}

.crm-list-status10 {
  background-color: #db843d !important;
}

.crm-field-item {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 4px;
}

.crm-field-item-title {
  padding  : 5px;
  font-size: 0.9*@font-size-base;
  color    : @color-text-caption;
}

.crm-field-item-content {
  padding  : 4px;
  font-size: @font-size-base;
  ;
  color: @color-text-paragraph;
}

.crm-field-item-operate {
  margin-top: 5px;
  color     : @brand-primary
}

.crm-field-item-bottom {
  height      : 1px;
  background  : @border-color-base;
  margin-left : 4px;
  margin-right: 4px;
}

.crm-card-hearder {
  width           : 100%;
  height          : 85*@hd;
  background-color: @brand-primary;
}

.crm-card-content {
  width : 100%;
  height: calc(~"100% - "70*@hd);

  .am-tabs {
    height: 43*@hd;
  }
}

.crm-card-footer {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  font-size      : 0.9*@font-size-base;
  padding-left   : 5px;
}

.crm-card-hearder-top {
  font-size    : 1.2*@font-size-base;
  color        : #FFF;
  font-weight  : bold;
  padding-top  : 4px;
  padding-left : 12*@hd;
  padding-right: 12*@hd;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.crm-card-hearder-middle {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding-left   : 12*@hd;
  padding-right  : 11 *@hd;
  font-size      : @font-size-base;
  color          : #FFF;
  margin-top     : 5px;
  height         : 26*@hd;
}

.crm-card-hearder-bottom {
  margin-top   : 5px;
  padding-left : 12px;
  font-size    : @font-size-base;
  color        : #FFF;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  padding-right: 12*@hd;
}

.crm-card-hearder-blank {
  margin-left: 15*@hd;
}

.crm-card-base {
  height          : 100%;
  overflow-y      : hidden;
  background-color: #f3f7fe;
  font-size       : @font-size-base;

  .am-card {
    min-height: auto;
  }

  .am-card-header {
    font-size: @font-size-base;
    padding  : 10px 15px;

    .am-card-header-content {
      border-left: 5px solid @brand-primary;
      color      : @color-text-paragraph
    }

    .am-card-header-extra {
      flex     : 3 1;
      padding  : 0px 0px;
      font-size: @font-size-caption-sm;
    }
  }

  .am-card-body {
    position  : relative;
    border-top: 1PX solid @border-color-base;
    padding   : 5px 12px 5px;
    font-size : @font-size-base;
    min-height: 0px;
    -ms-flex  : 1 1;
    flex      : 1 1;
  }

  .am-card-full {
    border-top   : none;
    border-bottom: none;
  }

  .am-list-body {
    border-top   : none;
    border-bottom: none;
  }
}

.crm-card-layout {
  display       : flex;
  flex-direction: column;
}

.crm-card-main {
  height    : calc(~"100% - "70*@hd);
  overflow-y: auto;
}

.crm-card-list {
  height: 100%;

  .wm-list-page-item-row-span {
    width: 100%;
  }
}

.crm-contacter-item {
  display     : flex;
  padding-left: 5px;
  align-items : center;
  padding     : 7px 0px;
}

.crm-contacter-item-left {
  width           : 40px;
  height          : 40px;
  line-height     : 40px;
  background-color: @brand-primary;
  border-radius   : 25px;
  text-align      : center;
  color           : #FFF;
}

.crm-plan-item-left {
  width           : 40px;
  height          : 40px;
  line-height     : 40px;
  background-color: @brand-primary;
  border-radius   : 25px;
  text-align      : center;
  font-size       : 14px;
  color           : #FFF;
}

.crm-plan-item-left-title1 {
  height     : 10px;
  line-height: 10px;
  font-size  : 10px;
  color      : #FFF;
  padding-top: 7px;
}

.crm-plan-item-left-title2 {
  height     : 14px;
  line-height: 14px;
  font-size  : 14px;
  color      : #FFF;
  padding-top: 2px;
}

.crm-contacter-item-right {
  flex        : 1;
  padding-top : 5px;
  padding-left: 10px;
}

.crm-contacter-item-title {
  font-size: @font-size-base;
  color    : @color-text-paragraph;
}

.crm-contacter-item-phone {
  font-size: 0.8*@font-size-base;
  color    : @color-text-caption;
}

.crm-contacter-item-operate {
  margin-right: 5px;
  color       : @color-text-caption;
}

.crm-plan-item-operate {
  margin-right: 8px;
  color       : red;
  font-size   : 0.8*@font-size-base;
}

.crm-contacter-item-bottom {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  height         : 22*@hd;
}

.crm_list-contact_avator {
  width        : 40px !important;
  height       : 40px !important;
  border-radius: 40px;
  position     : absolute;
  top          : 8px;
  left         : 0px;
}

.crm_list-share_avator {
  width        : 45px !important;
  height       : 45px !important;
  border-radius: 45px;
  position     : absolute;
  top          : 5px;
  left         : 0px;
}

.crm-am-avatar {
  position        : relative;
  display         : inline-block;
  vertical-align  : top;
  width           : 45px;
  height          : 45px;
  border-radius   : 50%;
  font-size       : 14px;
  text-align      : center;
  color           : #fff;
  background-color: #55B1F9;
}

.crm-am-avatar-span {
  position         : absolute;
  top              : 50%;
  left             : 50%;
  width            : 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform    : translate(-50%, -50%);
  transform        : translate(-50%, -50%);
}

.crm_phone {
  color: @brand-primary;
}

.crm_form {
  .wm-form {
    position: absolute;
    width   : 100%;
    height  : calc(~"100% - "48*@hd);
  }
}

.crm_form_btn {
  position: fixed;
  bottom  : 0px;
  width   : 100%;
}

.crm_map {
  display       : flex;
  flex-direction: column;
  height        : 100%;
}

.crm_map_title {
  background-color: @brand-primary;
  font-size       : @font-size-base;
  font-weight     : normal;
  padding-left    : 5px;
  color           : #fff;
  height          : 30px;
  line-height     : 30px;
  overflow        : hidden;
  text-overflow   : ellipsis;
  white-space     : nowrap;
}

.crm_map_content {
  height: 200px;
}

.crm_map_content_change {
  flex: 1 1;
}

.crm_map_content_visit {
  height: calc(~"100% - "47 * @hd + 30);
}

.crm_map_condition {
  height         : 30px;
  padding-top    : 5px;
  padding-bottom : 5px;
  display        : flex;
  justify-content: center;
  align-items    : center;
  border-top     : 1px solid #e5e5e5;
  border-bottom  : 1px solid #e5e5e5;
}

.crm_map_list {
  height: calc(~"100% - "272*@hd);

  .wm-list-page-item-row-span {
    width: 100%;
  }
}

.crm_commerce_change_head_font {
  border-radius: 2*@hd;
  color        : #ffffff;
}

.crm_commerce_change_head {
  background-color: @brand-primary;
  height          : 40px;
  border-radius   : 2*@hd;

  .am-wingblank {
    flex: 2;
  }
}

.crm_commerce_change_body {
  border-width: 1*@hd;
}

.crm_commerce_change_tip {
  font     : sans-serif;
  font-size: 18*@hd;
}

.crm_commerce_abnormal_body {
  border-radius: 2*@hd;
}

.crm_commerce_abnormal_space {
  background-color: #B5B5B7;
}

.crm_commerce_initFailedMsg {
  width : 60px;
  height: 60px;
}

.crm_list_font_s1 {
  font-size: 0.8*@font-size-base;
}

.crm-form-main {
  position  : absolute;
  width     : 100%;
  height    : 100%;
  left      : 0;
  top       : 0;
  z-index   : 998;
  background: #fff;

  .crm-form-content {
    height    : calc(~"100% - "47*@hd);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;

    .am-card {
      min-height: auto;
      margin    : 7px 5px;
    }

    .am-card-header {
      font-size: @font-size-base;
      padding  : 10px 15px;

      .am-card-header-content {
        color: @color-text-paragraph
      }

      .am-card-header-extra {
        flex     : 3 1;
        padding  : 0px 0px;
        font-size: @font-size-caption-sm;
      }
    }

    .am-card-body {
      position  : relative;
      border-top: 1PX solid @border-color-base;
      padding   : 5px 12px 5px;
      font-size : @font-size-base;
      min-height: 40px;
      -ms-flex  : 1 1;
      flex      : 1 1;
    }

    .crm-form-card-header {
      border-left : 5px solid @brand-primary;
      padding-left: 5px;
      color       : @color-text-paragraph;
    }
  }
}

.crm-chance-probability-circle {
  stroke: @brand-primary;
}

.crm-chance-probability-text {
  fill       : @brand-primary;
  font-size  : 11px;
  font-weight: 500;
}

.crm-list-around-distance {
  font-size: 1.2*@font-size-base;
  color    : @brand-primary;
}

.crm-list-around-unit {
  color       : #777;
  padding-left: 2px;
  font-size   : 0.8*@font-size-base;
}

.crm-contacter-list-swipe {
  background-color: @fill-grey-weak;
}

.crm-list-swipe-delete {
  background-color: red;
  color           : #FFF;
}

.crm-list-swipe-yellow {
  background-color: #da8e2c;
  color           : #FFF;
}

.crm-list-swipe-green {
  background-color: #d24545;
  color           : #FFF;
}

.crm-bg-loading {
  height     : 100%;
  width      : 100%;
  display    : flex;
  align-items: center;
  /*垂直居中*/
  justify-content: center;
  /*水平居中*/
}

.crm-card-contacter-list {
  margin-left: 6px;
}

.crm-zoom-div {
  display        : flex;
  justify-content: space-between;
  margin-top     : 3px;
}

.crm-zoom-image {
  height                 : 0;
  overflow               : hidden;
  background-position    : center center;
  background-repeat      : no-repeat;
  -webkit-background-size: cover;
  -moz-background-size   : cover;
  background-size        : cover;
}

.crm-flex-wrapper {
  display: flex;
}

.crm-flex-left {
  width     : 50px;
  min-height: 40px;
}

.crm-flex-right {
  flex : 1;
  color: @color-text-caption
}

.crm-related-wrapper {
  display  : flex;
  font-size: @font-size-base;
}

.crm-related-left {
  color: @color-text-paragraph;
}

.crm-related-right {
  flex : 1;
  color: @color-text-paragraph;
  word-wrap:break-word;
  word-break:break-all;
}

.crm_reply_mask {
  .wm-reply-mask {
    background-color: @color-text-paragraph;
    opacity         : 0.3;
  }
}

.crm_tabbar_reset {
  .am-tab-bar {
    position: fixed;
    width   : 100%;
    height  : 50px;
    bottom  : 0px;
  }
}

.header {
  height    : 80px;
  overflow  : auto;
  background: #aaa;
}

.container {
  height    : 500px;
  background: #ddd;
}

.gap {
  height: 500px;
}

.gap.short {
  height: 250px;
}

.gap.tall {
  height: 1000px;
}

.container.relative {
  overflow-y: auto;
}

.crm_Form {
  position: absolute;
  height  : 93%;
  width   : 100%;
}


.crm-homepage {
  height          : 100%;
  overflow-y      : hidden;
  background-color: #f3f7fe;
  font-size       : @font-size-base;

  .enters {
    .am-grid-text {
      font-size: 0.8*@font-size-base;
      color    : @color-text-caption  !important;
    }
  }

  .am-card {
    min-height: auto;
  }

  .am-card-header {
    font-size: @font-size-base;
    padding  : 10px 15px;

    .am-card-header-content {
      border-left: 5px solid @brand-primary;
      color      : @color-text-paragraph
    }

    .am-card-header-extra {
      flex     : 3 1;
      padding  : 0px 0px;
      font-size: @font-size-caption-sm;
    }
  }

  .am-card-body {
    position  : relative;
    border-top: 1PX solid @border-color-base;
    padding   : 5px 12px 5px;
    font-size : @font-size-base;
    min-height: 0px;
    -ms-flex  : 1 1;
    flex      : 1 1;
  }

  .am-card-full {
    border-top   : none;
    border-bottom: none;

    .am-card-body {
      border-top: none;
    }
  }

  .am-card-header-extra {
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;

  }

  .am-grid-icon {
    width: 45px;
  }

  .am-grid-text {
    color: @color-text-paragraph;
  }

  .am-grid-item-content {
    padding: 0 0 !important;
  }

  .crm-home-sells {
    margin: 0 auto;
    width : 95%;

    .crm-home-sells-item {
      margin : 4px 15*@hd;
      display: flex;

      .crm-home-sells-item-icon {
        font-size: 24*@hd;
        float    : left;
      }

      .crm-home-sells-item-content {
        margin-left: 5*@hd;
        float      : left;

        .crm-home-sells-item-content-text {
          color    : @color-text-caption;
          font-size: 0.8*@font-size-base;
        }

        .crm-home-sells-item-content-count {
          font-size: 1.2*@font-size-base;
          color    : orangered;
        }
      }
    }
  }

  .am-pull-to-refresh {
    height: 100%;

    .am-pull-to-refresh-content-wrapper {
      height: 100%;
    }
  }

}

.crm-sellsreport {
  .am-card {
    border-top    : none;
    border-bottom : none;
    padding-bottom: 0px !important;

    .am-card-body {
      border-top    : none;
      padding       : 0px 12px 0px !important;
      padding-bottom: 0px !important;
    }
  }

  .wm-list-view-page-modal {
    border-bottom: none;
  }
}

.crm_contact_list {
  height: 100%;

  .am-list-body {
    border-bottom: 0px solid white;
  }

  .am-list-body div:not(:last-child) .am-list-line {
    border-bottom: 1px solid white;
  }
}

.crm-contact-footer {
  margin-top: 6px;
  font-size : 0.8*@font-size-base;
  color     : @color-text-caption;
}

.crm-searchAd-icon {
  color: @brand-primary  !important;
}

.crm-homecard {
  padding-left: 12px;
}

.crm-homecard-footer {
  margin-top: 12px;
  font-size : 0.8*@font-size-base;
  color     : @color-text-caption;
}

.crm-homecard-footer-bottom {
  margin-top: 5px;
}

.crm-homecard-follow {
  display        : flex;
  justify-content: space-between;
}

.crm-homecard-tip {
  padding-top  : 20px;
  padding-right: 10px;
  color        : @color-text-caption;
  font-size    : 0.8*@font-size-base;
}

.crm-homecard-tip-days {
  font-size: 1.6*@font-size-base;
  color    : orangered;
}

.crm-homecard-new {
  text-align: center;
}

.crm-contact-footer {
  .am-icon-md {
    width     : 16px;
    height    : 16px;
    margin-top: 3px;
    cursor    : pointer;
  }
}

.crm-contact-reply-item {
  border-bottom : 1px solid #efeff4;
  padding-top   : 2px;
  padding-bottom: 2px;
}

.crm-contact-reply-item-title {
  margin: 5px 10px 5px;
  color : #333;
}

.crm-contact-reply-item-commentator {
  margin-right: 5px;
  color       : #3a4098;
}

.crm-contact-reply-item-row2 {
  display    : flex;
  font-size  : 12px;
  color      : #999;
  margin     : 5px 10px;
  height     : 22px;
  line-height: 22px;
}

.crm-contact-reply-item-row2-time {
  padding-left: 5px;
  flex        : 1 1;
}

.crm-contact-reply-item-row2-icon {
  height: 22px;
  width : 22px;
}
.am-rich-editor {
  height: 75px;
}